<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta charset="utf-8">
	<title>个人借贷计算器</title>
	<link rel="stylesheet" type="text/css" href="../frozenui/dist/css/frozen.css">
	<link rel="stylesheet" type="text/css" href="../frozenui/dist/css/basic.css">
	<link rel="stylesheet" type="text/css" href="../api/styles/style.css">
</head>
<body>
<div class="calc-banner">
	<img src="../api/images/calcBanner.png">
</div>
<ul class="calc-parameter">
	<li>
		<div class="calc-char fl">贷款种类</div>
		<div class="calc-select fr">
			<select>
				<option>请选择贷款种类</option>
				<option>2017</option>
				<option>2016</option>
			</select>
		</div>
	</li>
	<li>
		<div class="calc-char fl">贷款总额</div>
		<div class="calc-input fl">
			<input type="text" class="validate[required] validate[custom[number]]" placeholder="请输入你要贷款的总额" />
		</div>
		<div class="calc-unit fr">元</div>
	</li>
	<li>
		<div class="calc-char fl">按揭年限</div>
		<div class="calc-input fl">
			<input type="text" class="validate[required] validate[custom[number]]" placeholder="请输入贷款年限" />
		</div>
		<div class="calc-unit fr">年</div>
	</li>
	<li>
		<div class="calc-char fl">贷款利率</div>
		<div class="calc-input fl">
			<input type="text" class="validate[required] validate[custom[number]]" placeholder="请输入贷款利率" />
		</div>
		<div class="calc-unit fr">%</div>
	</li>
</ul>
<ul class="calc-loan">
	<li>
		<div class="loan-button">
			<div class="fl loan-active loan-touch">等额本息</div>
			<div class="fl loan-unactive loan-touch">等额本金</div>
		</div>
	</li>
	<li>
		<div class="calc-char fl">月还款额</div>
		<div class="calc-unit fr">元</div>
		<div class="calc-input fr">
			<input type="text" disabled="disabled" value="123" />
		</div>
	</li>
	<li>
		<div class="calc-char fl">支付利息总额</div>
		<div class="calc-unit fr">元</div>
		<div class="calc-input fr">
			<input type="text" disabled="disabled" value="123" />
		</div>
	</li>
	<li>
		<div class="calc-char fl">总还款额</div>
		<div class="calc-unit fr">元</div>
		<div class="calc-input fr">
			<input type="text" disabled="disabled" value="123" />
		</div>
	</li>
</ul>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="../frozenui/dist/js/frozen.js"></script>
<script type="text/javascript" src="../api/scripts/eshow.js"></script>
<script type="text/javascript" src="../api/scripts/script.js"></script>
<script type="text/javascript">
	$(".loan-touch").click(function(){
		$(this).addClass("loan-active").removeClass("loan-unactive");
		$(this).siblings().addClass("loan-unactive").removeClass("loan-active");
	});
</script>
</body>
</html>